let selectList = [
    { name: "奔驰0", id: 0 },
    { name: "宝马1", id: 1 },
    { name: "长安2", id: 2 },
    { name: "福特3", id: 3 },
    { name: "奔驰4", id: 4 },
    { name: "宝马5", id: 5 },
    { name: "长安6", id: 6 },
    { name: "福特7", id: 7 },
    { name: "奔驰8", id: 8 },
    { name: "宝马9", id: 9 },
    { name: "长安10", id: 10 },
    { name: "福特11", id: 11 },
];

let rules = [
    { message: '年龄不能为空' },
    { message: '年龄不能为英文', reg: /^\d+$/ },
    { message: '年龄不能大于100', reg: /^[0-9]{1,2}$/ },
]

let validator = (value, callback) => {
    if (value === '') {
        callback(new Error('地区不能为空'));
    } else if (value.indexOf('长沙') < 0) {
        callback(new Error('必须在长沙市内'));
    } else {
        callback();
    }
};

let fieldList = [
    {
        type: "count", label: "序号", width: 150, align: 'center',
    },
    {
        type: "text", label: "姓名", prop: 'name', width: 150, align: 'center', formatter: (value) => value + '1'
    },
    {
        type: "input", label: "年龄", prop: 'age', width: 150, validate: rules, align: 'center', headerAlign: 'left', disabled: false, placeholder: '请输入'
    },
    {
        type: "select", label: "车子", prop: 'car', width: 150, align: 'left', items: selectList, validate: true, placeholder: '请选择',
        selectName: 'name', selectValue: 'id', filterable: true, disabled: false,
    },
    {
        type: "autocomplete", label: "地区", prop: 'area', width: 150, validate: true, align: 'center', querySearch: (queryString, cb) => {
            var results;
            if (queryString) {
                results = ['望城区', '天心区', '雨花区', '望城区1', '天心区1', '雨花区1', '望城区2', '天心区2', '雨花区2'].filter(value => value.indexOf(queryString) >= 0);
            } else {
                results = ['望城区', '天心区', '雨花区', '望城区1', '天心区1', '雨花区1', '望城区2', '天心区2', '雨花区2'];
            }
            setTimeout(() => {
                console.log('定时器打印')
                cb(results);
            }, 1000);
        }
    },
    {
        type: "input", label: "地址", prop: 'address', width: 150, validate: true, align: 'center',
    },
    {
        type: "input", label: "年龄", prop: 'age', width: 150, validate: rules, align: 'center', disabled: false,
    },
    {
        type: "control", label: "操作", width: 150, copyBtn: true, deleteBtn: true, align: 'center', fixed: 'right',
    },
];

let dataList = [];
for (let i = 0; i < 7; i++) {
    dataList.push({ "name": 1, "age": i, "car": '0', "area": "长沙雨花区", "address": '德思勤' })
}
instance = new Table({
    el: '.box',
    fields: fieldList,
    data: dataList,
    config: {
        height: 300,
        showSummary: true,
        // summaryMethod: (obj) => {
        //     return { age: (obj.age * 1).toFixed(2) }
        // }
    },
    event: {
        onInsertRow: (row) => {
            console.log('onInsertRow')
        },
        onCopyRow: (row) => {
            console.log('onCopyRow')
        },
        onDeleteRow: (row) => {
            console.log('onDeleteRow')
        },
        onClickRow: (row) => {
            console.log('onClickRow')
        },
        onFieldChange(row, prop, oldValue, newValue) {
            // console.log('onFieldChange');
            // console.log('row =>', row);
            // console.log('prop =>', prop);
            // console.log('oldValue =>', oldValue);
            // console.log('newValue =>', newValue);
        },
    }
});